<template>
  <div class="quick-actions">
    <template v-if="isLoggedIn">
      <el-tooltip content="个人中心" placement="right" :show-after="500">
        <div class="action-button" @click="handlePersonalCenter">
          <el-icon class="pc-only">
            <User />
          </el-icon>
          <span class="button-text">个人中心</span>
        </div>
      </el-tooltip>

      <el-tooltip content="投递记录" placement="right" :show-after="500">
        <div class="action-button" @click="handleHistoryClick">
          <el-icon class="pc-only">
            <List />
          </el-icon>
          <span class="button-text">填写记录</span>
        </div>
      </el-tooltip>

      <el-tooltip content="退出登录" placement="right" :show-after="500">
        <div class="action-button" @click="handleLogout">
          <el-icon class="pc-only">
            <SwitchButton />
          </el-icon>
          <span class="button-text">退出登录</span>
        </div>
      </el-tooltip>
    </template>
    <template v-else>
      <el-tooltip content="登录" placement="right" :show-after="500">
        <div class="action-button" @click="handleLogin">
          <el-icon class="pc-only">
            <User />
          </el-icon>
          <span class="button-text">登录</span>
        </div>
      </el-tooltip>
    </template>

    <!-- 填写记录抽屉 -->
    <PaperHistory v-if="historyVisible" v-model:show="historyVisible" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, List, SwitchButton } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getToken, removeToken } from '@ruifox-cms/utils/src/storage'
import { userLogout } from '@/api/user'
import PaperHistory from './PaperHistory.vue'

const props = defineProps({
  setting: {
    type: Object,
    default: () => {}
  }
})

const historyVisible = ref(false)

// 判断是否登录
const isLoggedIn = ref(!!getToken())

// 处理个人中心
const handlePersonalCenter = () => {
  if (process.env.NODE_ENV === 'development') {
    window.location.href = location.protocol + '//' + location.hostname + ':8100/personal/center'
  } else {
    window.location.href = location.origin + '/ram/personal/center'
  }
}

// 处理登录
const handleLogin = () => {
  if (process.env.NODE_ENV === 'development') {
    window.location.href = location.protocol + '//' + location.hostname + ':8100/login/index?redirect=' + location.href
  } else {
    window.location.href = location.origin + '/ram/login/index?redirect=' + location.href
  }
}

// 处理退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userLogout().then(() => {
      removeToken()
      isLoggedIn.value = false
      ElMessage.success('退出登录成功')
      const { useAuth, useAccessAuth } = props.setting
      if (useAuth || useAccessAuth) {
        const { formLink } = JSON.parse(localStorage.getItem('baseFormInfo'))
        location.href = formLink
        localStorage.removeItem('baseFormInfo')
      }
    })
  })
}

// 处理投递记录点击
const handleHistoryClick = () => {
  historyVisible.value = true
}
</script>

<style lang="scss" scoped>
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;

  .action-button {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #606266;

    .el-icon {
      font-size: 20px;
    }

    .button-text {
      display: none;
      font-size: 14px;
    }
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

// 响应式样式
@media screen and (max-width: 768px) {
  .quick-actions {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    width: 100%;
    padding: 0;

    .action-button {
      width: auto;
      height: 32px;
      padding: 0 12px;
      border-radius: 4px;
      box-shadow: none;

      .pc-only {
        display: none;
      }

      .button-text {
        display: block;
      }
    }
  }
}
</style>